<template>
  <v-chart
    ref="vChartRef"
    :option="option"
    autoresize
    style="width: 100%; height: 320px"
  ></v-chart>
</template>

<script setup>
import { ref, defineProps, defineExpose } from "vue";
import VChart, { THEME_KEY } from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
} from "echarts/components";

const option = ref({
  grid: {
    left: "10%",
    right: "10%",
    bottom: "10%",
    top: "10%",
    containLabel: true,
  },
  tooltip: {
    show: true,
    trigger: "axis",
  },
  xAxis: {
    show: true,
    type: "category",
    data: [],
  },
  yAxis: {
    show: true,
    type: "value",
  },
  series: [],
});
use([
  DatasetComponent,
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  ToolboxComponent,
]);
const setData = (data) => {
  option.value = {
    title: {
      text: data.title,
      left: "center",
      top: 5,
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      top: "12%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    xAxis: {
      show: true,
      type: "category",
      data: data.yAxis,
    },
    yAxis: {
      show: true,
      type: "value",
    },
    backgroundColor: "#ffffff",
    series: [...data.data],
  };
};
defineExpose({
  setData,
});
</script>
